<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<meta charset="UTF-8">
<title>主页</title>
<link rel="stylesheet" href="webjars/easyui-186/1.8.6/themes/gray/easyui.css">
<link rel="stylesheet" href="webjars/easyui-186/1.8.6/themes/icon.css">
<link rel="stylesheet" href="static/custom.css">
<script type="text/javascript" src="webjars/easyui-186/1.8.6/jquery.min.js"></script>
<script type="text/javascript" src="webjars/easyui-186/1.8.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="webjars/easyui-186/1.8.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="static/custom.js"></script>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}
.middle {
	/* display: table-cell;
	vertical-align: middle; */
	display: flex;
	flex-direction:column;
	justify-content:center;
	color: #ddd;
}
</style>
<script type="text/javascript">
	function showTab(container, title, src) {
		var tabContainer = $(container);
		if (tabContainer.tabs('exists', title)) {
			var tab = tabContainer.tabs('getTab', title); // 获取选中的选项卡
			var currentTab = tabContainer.tabs('getSelected');
			if (tab == currentTab) {
				tab.panel('refresh', src);
			} else {
				tabContainer.tabs('select', title); //将选中的tab设为当前tab
			}
		} else {
			tabContainer.tabs('add', {
				'title' : title,
				'href' : src,
				'closable' : true /* ,
				'tools' : [ $.tabs.panel.buttons.refresh ] */
			});
		}
	}
	$(function(){
		$('#tabContainer').tabs({
			fit:true
		});
		$("#menu .easyui-tree").tree({
			/* onBeforeSelecte:function(node){
                  $('#menu div.tree-node-selected').removeClass('tree-node-selected');
				}, */
			onClick : function(node) {
				if (node.text != undefined && node.href != undefined) {
					showTab('#tabContainer', node.title ? node.title : node.text, node.href);
				}
			}
		});
	});
	function xgmm(){
		var dialog = $('<div/>');
		dialog.appendTo($('body'));
		dialog.dialog({
		    title: '修改密码',
		    width:400,
		    height:300,
		    cache: false,
		    modal: true,
		    href:'password/edit',
		    onClose:function(){
		    	dialog.dialog('destroy');
		    	dialog.remove();
			},
			buttons:[{
				iconCls:'icon-save',
				text:'保存',
				handler: function(e){
					var form=$(this).closest('div.window').children('div.window-body').find('form');
					var formDom = form[0];
					var pwd1 = formDom.password1.value;
					var pwd0=formDom.password0.value;
					var pwd2=formDom.password2.value;
					var params=form.serialize();
					if(pwd0.length==0){
						$.messager.alert('提示','原密码不能为空！','info');
						return;
					}
					if(pwd1.length==0){
						$.messager.alert('提示','密码不能为空！','info');
						return;
					}
					if(pwd1!=pwd2){
						$.messager.alert('提示','两次输入密码不一致','info');
						return;
					}
					$.post('password/save',params,function(data){
						if(data==true){
						dialog.dialog('close');
						$.messager.alert('提示','修改成功','OK');
						window.setTimeout("window.location=window.location.pathname+'?logout'",500);
							
						}
						if(data==false){
							$.messager.alert('提示','原密码输入错误','info');
							return;
						}
					})
					
				}		
			},{
				iconCls:'icon-cancel',
				text:'退出',
				handler: function(){
					dialog.dialog('close');
				}				
			}]
		});
		}
</script>

</head>
<body class="easyui-layout">
	<div class="middle" data-options="region:'north'" style="color:white; height:80px;padding-left:30px;padding-right: 10px;background-color: black;">
		<div style="display: flex; flex-direction: row; justify-content: space-between;align-items:center;">
			<span style="font-size: 2.5em;">EasyUI 成绩管理系统</span>
			<a onclick="xgmm()" style="float: right;font-size: 15px;cursor: pointer;" class="xgmm">修改密码</a>
			<span style="margin-right: 30px;font-size: 1.2em;">欢迎你:<span sec:authentication="principal.name" style="margin-right: 20px;"></span><a style="color: #ddd;" href="logout">注销</a></span>
		</div>
	</div>
    <div data-options="region:'west',iconCls:'icon-more', title:'菜单栏',split:true" style="width:200px;">
		<div id="menu" class="easyui-accordion" fit=true style="width:300px;height:200px;">   
		    <div title="成绩查询" data-options="iconCls:'icon-search'" style="overflow:auto;padding:10px;">   
				<ul class="easyui-tree" sec:authorize="hasRole('ROLE_STUDENT')||hasRole('ROLE_TEACHER')">
				  	<li data-options="href:'grade/cjcx'">班级成绩查询</li>
				</ul>
		    </div>
		    <div title="成绩管理" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;"sec:authorize="hasRole('ROLE_ADMIN')||hasRole('ROLE_TEACHER')">   
				<ul class="easyui-tree">
					  <li data-options="href:'grade/grcjlr'">个人成绩录入</li>
					 <li data-options="href:'grade/bjcjlr'">班级成绩录入</li>
				</ul>
		    </div>   
		    <div title="系统设置" data-options="iconCls:'icon-large-smartart'" sec:authorize="hasRole('ROLE_ADMIN')">   
		        <ul class="easyui-tree">
		        	<li data-options="href:'course/manage'">课程管理</li>
		        	<li data-options="href:'banji/manage'">班级管理</li>
					<li data-options="href:'student/manage'">学生管理</li>
		        </ul>    
		    </div>   
		</div>  
    </div>   
    <div class="middle" data-options="region:'south'" style="height:40px;background: #ddd;text-align: center;font-size: 1em;">
    	<span style="color: #666;">GOOD GOOD STUDY</span>
    </div>   
    <div data-options="region:'center'" >
		<div id="tabContainer" style="padding: 1px;">
			<div title="首页" style="padding: 10px;" >
			<p >学生默认账号为'学号',<br>
			    默认密码为1111,<br>
			 学生登录只能查询成绩,<br>
			    教师可以查询成绩和录入成绩,<br>
			    管理员都可。
			</p>
           
			</div>
		</div>
    </div>   
</body>
</html>